<template>
	<view class="content">
		<!-- header -->
		<view class="MenuList">
		<!--  滑动视图 -->
				<uni-section title="公共目录" type="line" padding>
		<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
					<swiper class="swiper" :indicator-dots="true">
						<!-- item / 1 -->
						<swiper-item>
							<uni-grid :column="5" :highlight="true" @change="change" :showBorder="false">
								<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
									<view class="grid-item-box">
										<image :src="item.url" class="image" mode="aspectFill" />
										<text class="text">{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
						<!-- item / 2 -->
						<swiper-item>
							<uni-grid :column="5" :highlight="true" @change="changeOne" :showBorder="false">
								<uni-grid-item v-for="(item, index) in listSeconed" :index="index" :key="index">
									<view class="grid-item-box">
										<image :src="item.url" class="image" mode="aspectFill" />
										<text class="text">{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
					</swiper>
				</uni-section>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						url: '/static/logo/xingz.png',
						text: '行政区域',
						path:'/compopents/PubilcCatalogue/AdministrativeRegion/AdministrativeRegion'
					},
					{
						url: '/static/logo/jigou.png',
						text: '机构列表',
						path:'/views/InstitutionList/InstitutionList'
					},
					{
						url: '/static/logo/yuanq.png',
						text: '院区列表',
						path:'/views/Campus/Campus'
					},
					{
						url: '/static/logo/linc.png',
						text: '临床科别',
						path:'/views/ClinicalDepartment/ClinicalDepartment'
					},
					{
						url: '/static/logo/renyuan.png',
						text: '人员相关',
						path:'/views/PersonnelRelated/PersonnelRelated'
					},
					{
						url: '/static/logo/xiyao.png',
						text: '西成药品',
						path:'/views/XichengPharmaceutical/XichengPharmaceutical'
					},
					{
						url: '/static/logo/zhongyao.png',
						text: '中药药品',
						path:'/views/TraditionalChineseMedicineDrugs/TraditionalChineseMedicineDrugs'
					},
					{
						url: '/static/logo/weis.png',
						text: '卫生材料',
						path:'/views/SanitaryMaterials/SanitaryMaterials'
					},
					{
						url: '/static/logo/jiany.png',
						text: '检验相关',
						path:'/views/InspectionRelated/InspectionRelated'
					},
					{
						url: '/static/logo/right.png',
						text: '更多'
					},
				],
				
				listSeconed:[
					{
						url: '/static/logo/kuf.png',
						text: '库房相关',
						path:'/views/WarehouseRelated/WarehouseRelated'
					},
					{
						url: '/static/logo/bingl.png',
						text: '病例相关'
					},
					{
						url: '/static/logo/yizhu.png',
						text: '医嘱相关'
					},
					{
						url: '/static/logo/feiy.png',
						text: '费用相关'
					},
					{
						url: '/static/logo/xuek.png',
						text: '血库相关'
					},
				
				]
			};
		},
		methods:{
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				let currentext = this.list[index].text
				// console.log(currentext);
				uni.showToast({
					title: `即将跳转至${currentext}`,
					icon: 'none',	
				})
				uni.navigateTo({
				url:this.list[index].path
				},1000)
			},
			// seconed chance
			changeOne(e) {
				let {
					index
				} = e.detail
				this.listSeconed[index].badge && this.listSeconed[index].badge++
				let currentext = this.listSeconed[index].text
				// console.log(currentext);
				uni.showToast({
					title: `即将跳转至${currentext}`,
					icon: 'none',	
				})
				uni.navigateTo({
				url:this.listSeconed[index].path
				},1000)
			},
		},
		
	}
</script>

<style lang="scss">
	/* 滑动视图 */
	.image {
			width: 25px;
			height: 25px;
		}
	
		.text {
			font-size: 10px;
			margin-top: 5px;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			// display: block;
			/* #endif */
		}
	
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
	
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 4px 0;
		}
		::v-deep .uni-section-header{
			padding: 10px 0 0 10px !important;
		}
		::v-deep .uni-section-content{
			padding: 0 10px 0 10px !important;
		}
		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 4px 0;
		}
	
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	
		.swiper {
			// height: 420px;
		}
	
		/* #ifdef H5 */
		@media screen and (min-width: 768px) and (max-width: 1425px) {
			.swiper {
				// height: 630px;
			}
		}
	
		@media screen and (min-width: 1425px) {
			.swiper {
				height: 830px;
			}
		}
	
		/* #endif */
</style>
